<template>
	<view class="page">
		<CustomNav :isBack="true" color="#fff" :topBgColor="topBgColor" :title="title"></CustomNav>
		<image :src="cloudStorage+'/detail_bg_zl.png'" class="bg-img" mode="widthFix"></image>
		<view class="info-block">
			<LineTitle :title="title"></LineTitle>
			<view class="search-block">
				<input placeholder="请输入关键词" v-model="keyword" class="search-crl" />
				<view class="btn normal" @click="search">搜索</view>
			</view>
			<view class="info-content">
				<view class="info-item" v-for="item in searchList" :key="item.id"
					@click="navigate('/page_pack/overall/detail?name='+item.title+'&id='+item.id)">
					<view class="title">{{item.title}}</view>
					<image :src="cloudStorage+'/right.png'" class="right"></image>
				</view>
			</view>
		</view>
		<Back></Back>
	</view>
</template>

<script>
	import CustomNav from '@/components/CustomNav/CustomNav.vue'
	import LineTitle from '@/components/LineTitle/LineTitle.vue'
	import Back from '@/components/Back.vue'
	export default {
		components: {
			CustomNav,
			LineTitle,
			Back
		},
		data() {
			return {
				topBgColor: 'rgba(0,0,0,0)',
				keyword: '',
				title: '',
				searchList: [],
				list: [{
						id: 1,
						title: '历史沿革',
					},
					{
						id: 2,
						title: '肃州区情况概况',
					},
					{
						id: 3,
						title: '全市各县市区经济指标',
					},
					{
						id: 4,
						title: '主要经济指标对比分析',
					},
					{
						id: 5,
						title: '主要经济指标完成情况',
					},
					{
						id: 6,
						title: '第三产业指标完成情况',
					},
					{
						id: 7,
						title: '全市高质量发展奖获奖情况',
					},
					{
						id: 8,
						title: '全市各县市区经济发展预期目标',
					},
					// {
					// 	id: 9,
					// 	title: '新质生产力发展路径分析',
					// },
					{
						id: 10,
						title: '创建命名示范区情况',
					},
					{
						id: 11,
						title: '人口、天气、国土面积情况',
					},
					{
						id: 12,
						title: '城镇建设用地结构规划',
					},
					{
						id: 13,
						title: '街道情况',
					},
					{
						id: 14,
						title: '生态环境、自然资源情况',
					},
					{
						id: 15,
						title: '社会事业情况',
					},
					{
						id: 16,
						title: '城市市政公用设施水平基本情况',
					},
					{
						id: 17,
						title: '区本级分行业入库税收情况',
					},
					{
						id: 18,
						title: '区本级分税种入库税收情况',
					},
					{
						id: 19,
						title: '经开区分行业税收收入完成情况',
					},
					{
						id: 20,
						title: '经开区分税种税收收入完成情况',
					},
					{
						id: 21,
						title: '财政收支情况',
					},
					{
						id: 22,
						title: '民生支出执行情况',
					},
					{
						id: 23,
						title: '债务情况',
					},
					{
						id: 24,
						title: '金融机构基本信息',
					},
					{
						id: 25,
						title: '区属国企国资情况',
					},
					{
						id: 26,
						title: '国有林场情况',
					},
					{
						id: 27,
						title: '区人大工作情况',
					},
					{
						id: 28,
						title: '区政协工作情况',
					},
					{
						id: 29,
						title: '区工商联工作情况',
					},
					{
						id: 30,
						title: '民主党派、无党派人士工作情况',
					},
					{
						id: 31,
						title: '人力资源与社会保障工作情况',
					},
					{
						id: 32,
						title: '党组织设置情况',
					},
					{
						id: 33,
						title: '民族宗教情况',
					},
					{
						id: 34,
						title: '政法队伍工作情况',
					},
					{
						id: 35,
						title: '驻肃机构情况',
					},
					{
						id: 36,
						title: '驻肃部队情况',
					},
					{
						id: 37,
						title: '区直机关事业单位情况',
					},
					{
						id: 38,
						title: '产业园区情况',
					},
					{
						id: 39,
						title: '市场主体培育发展情况',
					}
				]
			}
		},
		watch: {

		},
		methods: {
			search() {
				this.searchList = this.list.filter(item => item.title.includes(this.keyword))
			}
		},
		onLoad(e) {
			this.title = e.title
			this.searchList = this.list
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		overflow: hidden;
		min-height: 100vh;
		background-color: #f8f8f8;

		.bg-img {
			width: 100%;
		}

		.info-block {
			position: relative;
			padding: 30rpx;

			.search-block {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #FFFFFF;
				border-radius: 50rpx;
				height: 80rpx;
				margin-top: 30rpx;
				padding: 0 30rpx;

				.search-crl {
					width: calc(100% - 160rpx);
				}

				.btn {
					width: 140rpx;
					height: 60rpx;
					font-size: 30rpx;
				}
			}

			.info-item {
				margin-top: 30rpx;
				width: 100%;
				height: 140rpx;
				padding: 30rpx;
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #FFFFFF;

				.title {
					font-size: 32rpx;
				}

				.right {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
</style>